//初始化
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 微软雅黑;
}
a{
    text-decoration: none;
    display: block;
    color: #000;
}
ul{
    list-style: none;
}
div{
    // border: solid 1px;
}
//自适应设置
@function vw($px:1){
    @return $px / 375 * 100vw;
}
@function vw($px:1){
    @return $px / 375 * 100vw;
}
//容器样式
.container{
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    .grid{
        flex: auto 1 auto;
        display: flex;
        background-color: #fff;
    }
    //head部分样式
    .head{
        flex-basis: vw(30);
        padding: vw(0) vw(10) vw(7);
        .esc,.share{
            flex-basis: vw(30);
            transform: rotate(180deg);
        }
        .head-text{
            flex: 1 1 auto;
            line-height: vw(30);
            text-align: center;
            font-size: vw(17);
        }
    }
    //轮播图样式
    .carousel{
        flex-basis: vw(150); 
        overflow: hidden;
        position: relative;
        .parts{
            height: vw(150);
            transition: all 2s linear;
            width: vw(375);
            //轮播过渡动画作用标签
            .picture{
                width: 500%;
                transition: all 1.5s linear;
                div{
                    float: left;
                    width: 20%;
                    img{
                        width: 100%;
                        height: vw(150);
                    }
                }
                   
              
            }
           //单选按钮
            .danxuan{
                display: none;
            }
            //控制器
            .control{
                position: absolute;
                display: flex;
                bottom: vw(6);
                left: 50%;
                transform: translateX(-50%);
                label{
                    width: vw(10);
                    height: vw(3);
                    background-color: #fff;
                    border: vw(1) solid;
                    margin-right: vw(5);
                    display:block; 
                }
                label:hover{
                    background-color: red;
                }
            }
            //过渡动画
            $i:1;
            @while $i < 6 {
                #r#{$i}:checked{
                    ~.picture{
                        margin-left: 100% - $i * 100%;
                        $i:$i+1;
                    } 
                }
            }
        }      
    }
    // banner部分样式
    .banner{
        flex-basis: vw(85.5);
        position: relative;
        top: vw(-4);
        background-color: #fff;
        border-top-left-radius: vw(9);
        border-top-right-radius: vw(9);
        img{
            border-radius: 10px;
            position: absolute;
            height: vw(80);
            width: vw(375);
            display: block;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    }
    //专栏部分样式
    .chapter{
        margin: vw(8.5) vw(0) 0;
        display: flex;
        flex-wrap: wrap;
        flex-basis: vw(146);
        justify-content: center;
        align-content: center;
        [class*=chapter]{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            height: vw(57);
            flex-basis: vw(82);
            margin: vw(3) vw(4) vw(5);
            font-size: vw(12);
            box-shadow: vw(3) vw(3) vw(5) #666;
            .top{
                background-color: orange;
                display: block;
                width: vw(27);
                height: vw(14);
                position:absolute;
                left: 0;
                top: 0;
                border-radius: 0 0 vw(8) 0;
                span{
                    display: block;
                    font-size: vw(16);
                    transform: scale(.5);
                    position: absolute;
                    top: vw(-4);
                }
            }
            .title{
                margin-top: vw(12);
                line-height: vw(12);
                font-weight: 700;
                font-size: vw(16);
            }
            .content{
                line-height: vw(20);
                color: #333;
                text-decoration: underline;
            }
        }
    }
    //资讯部份样式
    .info{
        flex-basis: vw(65);
        margin-top: vw(10);
        display: flex;
        .info-new{
            img{
                height: vw(36.7);
                flex-basis: vw(35);
                margin: vw(14.3) 0 vw(14) vw(13);
            }
        }
        .info-excerpt{
            flex: 1 1 auto;
            // height: vw(64);
            font-size: vw(12);
            a{
                line-height: vw(17);
                margin: vw(5) vw(12);
                width: vw(210);
                // border: solid;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .info-link{
            // height: vw(64);
            flex-basis: vw(50);
            text-align: center;
            line-height: vw(65);
            background-color: #999;
        }
    }
    //特色一览样式
    .featured{
        margin: vw(10) 0;
        flex-basis: vw(177);
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        [class*=featured]{
                height: vw(86);
                flex-basis: vw(181);
                img{
                    flex-basis: vw(165);
                    height: vw(70);
                    margin: vw(4) vw(8) vw(12);
                }
          
        }
    }
    //优选景区样式
    .prefer{
        margin-top: vw(10);
        justify-content: center;
        align-content: center;
        padding: vw(15) vw(13) vw(13) vw(15);
        flex-wrap: wrap;
        [class*=prefer]{
                height: vw(114);
                flex-basis: vw(112);
                margin-right: vw(2);
                margin-bottom: vw(2);
                position: relative;
                >a{
                    img{
                        width: vw(110);
                        height: vw(112);
                        border-radius: vw(10);
                    }
                }
                img{
                    width: vw(110);
                    height: vw(112);
                    border-radius: vw(10);
                }
                //图片左下角的文字样式
                .fengjing{
                    position: absolute;
                    border-radius: 0 vw(10) 0 vw(10);
                    background-color: #6281c3;
                    bottom: 0;
                    left: 0;
                    font-size: vw(12);
                    padding: vw(5);
                    margin-bottom: vw(2); 
                }
        }
    }
}






